<template>
  <el-card class="box-card el-card-flex addHolidayRules">
    <div slot="header" class="clearfix">
      <span>
        查看代理
      </span>
    </div>
    <div class="text item">
      <div style="margin-bottom: 50px;overflow: auto;">
        <el-form :model="formInline" class="demo-form-inline">
          <el-form-item label="代理人:" label-width="72px">
            <el-col :span="5">
              <p>{{formInline.agentFromName}}</p>
            </el-col>
          </el-form-item>
          <el-form-item label="代理方式:">
            <p>{{agentTypeObj[formInline.agentType]}}</p>
          </el-form-item>
          <el-form-item>
            <el-form :inline="true">
              <el-form-item label="生效时间:">
                <el-col :span="28">
                  <p>{{formInline.startTime}}</p>
                </el-col>
              </el-form-item>
              <el-form-item label="终止时间:">
                <el-col :span="28">
                  <p>{{formInline.endTime}}</p>
                </el-col>
              </el-form-item>
            </el-form>
          </el-form-item>
          <el-form-item label="代理原因:">
            <el-col :span="11">
              <p>{{formInline.agentReason}}</p>
            </el-col>
          </el-form-item>
        </el-form>
        <el-table
          :data="processTableData"
          border
          stripe
          style="width: 100%; margin-bottom: 50px"
          ref="appRefTable"
        >
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="流程/活动定义ID"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemType" label="类型"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemName" label="流程/活动名称" align="center"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="accessType" label="流程操作权限" align="center"></el-table-column>
          <el-table-column min-width="100px" sortable v-if="formInline.agentType === 'PART'" :show-overflow-tooltip="true" prop="parentId" label="活动所属流程定义ID"></el-table-column>
          <!-- <el-table-column min-width="100px" sortable prop="control" align="center" label="操作" width="100" fixed="right"> -->
            <!-- <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="删除" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template> -->
          <!-- </el-table-column> -->
        </el-table>
      </div>
    </div>
    <div class="holidayFooter">
      <el-button type="danger" @click="handleAddClose">
        关闭
        <i class="el-icon-close"></i>
      </el-button>
    </div>
  </el-card>
</template>
<script>
import { Tree, Dialog, Table, TableColumn, Pagination, MessageBox, Message, Drawer} from 'element-ui'
import { workFlowProxy } from '@/api/workflow/holidayRules/holidayRules.js'
export default {
  name: 'addHolidayRules',
  components: {
    'el-tree': Tree, // 树形菜单
		'el-dialog': Dialog, // 对话框
		'el-table': Table, // 表格
		'el-table-column': TableColumn, // 表格列
		'el-pagination': Pagination, // 分页
    'el-drawer': Drawer // 抽屉
  },
  data() {
    return {
      agentTypeObj: {
        ALL: '完全代理',
        PART: '部分代理',
      },
      formInline: {},
      processTableData: [], // 流程活动数据
    }
  },
  created() {
    this.formInline = this.$route.params.formInline
    console.log(this.formInline)
    this.processEvent()
  },
  methods: {
    // 流程表格数据
    processEvent() {
      let agentId = this.formInline.agentId
      workFlowProxy(agentId).then(res => {
        console.log(res)
        this.processTableData = res.data.data.agentItemList
      })
    },
    // 关闭按钮
    handleAddClose () {
      this.$router.go(-1) // 返回上一页
    }
  }
}
</script>
<style lang="scss" scoped>
.addHolidayRules{
	position: relative;
	.holidayFooter {
		position: absolute;
		bottom: 10px;
		right: 20px;
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: right;
		background: #ffffff;
    z-index: 999;
	}
}
</style>